<template>
  <view class="news">
    <!-- <view class="news-item" v-for="i in 10">
      <image class="news-item__img" src="https://zgq-icu-2002-1313043931.cos.ap-shanghai.myqcloud.com/yaxin/image%402x.png"></image>

      <view class="news-item__desc">
        <view class="c333 font28">东数西算安全联合创新中心在南京成立</view>
        <view class="c999 font24 mgt20">2023/07/01</view>
      </view>
    </view> -->
    <swiper
      class="swiper"
      :current="current"
      :circular="false"
      :indicator-dots="false"
      :autoplay="false"
      next-margin="248rpx"
      @change="swiperChangeHandler"
    >
      <swiper-item v-for="(item, index) in options" :key="index">
        <view class="news-item" @click.stop="$u.route({
          url: '/pages-details/news/detail',
          params: {
            id: item.ti_id,
            from: 'home'
          }
        })">
          <image
            class="news-item__img flex"
            :src="getImgUrl(item.ti_icon)"
          ></image>

          <view class="news-item__desc">
            <view class="c333 font28 desc-text">{{ item.ti_title }} </view>
            <view class="c999 font24 mgt20">{{$timeFilter(item.ti_add_date, 'YYYY/MM/DD')}}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <view class="mgt20 flex justify-center" v-if="list.length > 0"> 
      <view class="line">
        <view class="line-dot" :style="{
          width: `${dotWidth}rpx`,
          transform: `translateX(${current * dotWidth}rpx)`
        }"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      current: 0,
      list: [
        '',
        '',
        '',
        ''
      ]
    };
  },

  computed: {
    dotWidth(){
      return 240 / this.options.length
    }
  },

  methods: {
    swiperChangeHandler(e) {
      const { current } = e.detail;
      this.current = current;
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 426rpx;
}
.news-item {
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(72, 30, 193, 0.1);
  border-radius: 20rpx;
  overflow: hidden;
  margin-right: 20rpx;
  background-color: white;
  width: 420rpx;
  flex-shrink: 0;
  min-height: 426rpx;

  &:nth-child(2n) {
    margin-right: 0;
  }

  &__img {
    height: 244rpx;
    width: 100%;
  }

  &__desc {
    padding: 20rpx;
  }
}

.news {
  padding-left: 40rpx;
}

.line {
  width: 240rpx;
  height: 4rpx;
  background-color: #E2D9FF;
  position: relative;

  &-dot {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    background-color: #3522BB;
    transition: all 0.2s linear;
  }
}

.desc-text {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>